fix: resolve strict mode incompatibilities with portals and popups (FE-7197) #7688
+367
−328
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
DipperTheDan
reviewed
Jan 9, 2026
| export const TopModalProvider = ({ children }: { children: ReactNode }) => { | ||
| const [topModal, setTopModal] = useState<HTMLElement | null>(null); | ||
|
|
||
| // can't add the setter to the global list inside useEffect because that doesn't run until |
Contributor
There was a problem hiding this comment.
question(non-blocking): Are we all good to remove this ref and condition for first render? The comment states that we can't add the setter to the global list inside a useEffect and we're now doing that.
Contributor
Author
There was a problem hiding this comment.
This should be okay now, since Modal no longer attempts to access this global on initial render.
Portal now creates its attachment node on a separate render to when the portal content is displayed. Because of this change, Modal has been re-structured (see below) so its internal hooks, like useModalManager, are only called once the modal content is rendered.
// src/__internal__/modal/modal.component.tsx#L179
const Modal = (props: ModalProps) => (
<Portal>
{/* 👇 `Portal` only renders this once its attachment node is present */}
<ModalRoot {...props} />
</Portal>
);
edleeks87
reviewed
Jan 14, 2026
| const [portalNode, setPortalNode] = useState<HTMLElement | null>(null); | ||
| const [didCreateNode, setDidCreateNode] = useState(false); | ||
|
|
||
| useEffect(() => { |
Contributor
There was a problem hiding this comment.
suggestion (non-blocking):
useEffect(() => {
// Find or create portal node
let node = document.getElementById(id);
const shouldCreateNode = !node;
if (shouldCreateNode) {
node = document.createElement("div");
node.setAttribute("id", id);
document.body.appendChild(node);
}
setDidCreateNode(shouldCreateNode);
setPortalNode(node);
// Cleanup portal node if component created it
return () => {
if (shouldCreateNode) {
node?.remove();
}
};
}, [id]);
| @@ -0,0 +1,22 @@ | |||
| import { useEffect, useState } from "react"; | |||
|
|
|||
| function canUseDOM() { | |||
Contributor
There was a problem hiding this comment.
suggestion (non-blocking): we could use the getDocument and getWindow utils here instead
nineteen88
previously approved these changes
Jan 15, 2026
PortalContext was added to ensure Portal was captured by Chromatic properly, by attaching the React portal to Storybook's root element. Storybook no longer uses the referenced root, so this context is unused.
tomdavies73
force-pushed
the
FE-7197/strict-mode-fixes-v2
branch
from
4f68f8d to
6e7cd4b
Compare
edleeks87
previously approved these changes
Jan 16, 2026
nineteen88
previously approved these changes
Jan 16, 2026
tomdavies73
force-pushed
the
FE-7197/strict-mode-fixes-v2
branch
from
6e7cd4b to
0b8e605
Compare
tomdavies73
dismissed stale reviews from edleeks87 and nineteen88
via
62e315e
tomdavies73
force-pushed
the
FE-7197/strict-mode-fixes-v2
branch
from
62e315e to
6f9cbda
Compare
tomdavies73
force-pushed
the
FE-7197/strict-mode-fixes-v2
branch
from
6f9cbda to
688ea30
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed behaviour
For Carbon components involving React Portals, resolve inconsistencies in rendering behaviour:
Portal- when unmounting, properly clean up DOM node created as the container for the portal contentPopover- always render portal content in document body or nearest Carbon modal, to avoid the need to create and cleanup a DOM node.CarbonProvider- ensure global used in updating topmost modal is cleaned up properly.Current behaviour
Since #7148 was released, several Carbon components that use React Portals show unexpected behaviour when React Strict Mode is enabled, such as modals and popups not appearing at all. This occurs because these components have rendering inconsistencies that are surfaced by the stricter Strict Mode checks introduced in React v18.
Before upgrading Carbon to support newer React versions, we should ensure all components behave correctly under Strict Mode to prepare for future React changes.
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions
npm run start:strict-modeAdvancedColorPickerAlertConfirmDialogSidebarMenuFullscreenResponsiveVerticalMenuToastTooltipVerticalMenuFullscreen